<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg" style="max-width: 90% !important;">
        <div class="modal-content">
            <div class="row" style="margin-left:15px;margin-top:30px;">
                <div class="col-6" style="position:relative;">
                    <div class="form-group m-form__group align-items-center">
                        <label>{{l('Date')}}</label>
                        <date-range-picker needInitDate="false" name="SampleDateRangePicker" [showButton]="false"
                            (buttonEmit)="getList()" [(startDate)]="StartTime" [(endDate)]="EndTime" [allowFutureDate]="false">
                        </date-range-picker>
                    </div>
                </div>
                <div class="col-3">
                    <label>{{l('type')}}</label>
                    <div class="form-group">
                        <div class="input-group">
                            <select class="form-control" [(ngModel)]="OutPutInStorageType" name="OutPutInStorageType">
                                <option value="">{{l('All')}}</option>
                                <option value="0">{{l('OutQuantity')}}</option>
                                <option value="1">{{l('InQuantity')}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group m-form__group align-items-center">
                        <label>&nbsp;</label>
                        <div class="input-group">
                            <button type="button" class="btn btn-primary" [buttonBusy]="primengTableHelper.isLoading"
                                (click)="getList()">
                                <i class="la la-refresh"></i>
                                {{l("search")}}
                            </button>
                        </div>
                    </div>
                </div>

                <button type="button" class="close" (click)="close()" aria-label="Close" style="position:absolute;top:20px;right:30px;font-size:2rem;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div [class]="containerClass">
                <div class="card card-custom gutter-b">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table #dataTable (onLazyLoad)="getList($event)" [value]="primengTableHelper.records"
                                    [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false" [lazy]="false"
                                    [responsive]="primengTableHelper.isResponsive">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:5%;">{{l('RecordId')}}</th>
                                            <th style="width:20%;">sku{{l('name')}} </th>
                                            <th style="width:7%;">{{l('changeQuantity')}} </th>
                                            <th>{{l('Quantity Before')}} </th>
                                            <th>{{l('Quantity After')}} </th>
                                            <th>{{l('billNo')}} </th>
                                            <th>{{l('outerId')}} </th>
                                            <th>{{l('LayoutTime')}} </th>
                                            <!-- <th pSortableColumn="creationTime">
                                                {{l('LayoutTime')}}
                                                <p-sortIcon field="creationTime"></p-sortIcon>
                                            </th> -->

                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record let-i="rowIndex">
                                        <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                            <td style="width:5%"> {{transIndex(i)}}</td>
                                            <td><span>{{record.sku.title}}</span></td>
                                            <td><span>{{record.number}}</span></td>
                                            <td><span>{{record.quantityBefore}}</span></td>
                                            <td><span>{{record.quantityAfter}}</span></td>
                                            <td><span>{{record.bill.billNo}}</span></td>
                                            <td><span>{{record.bill.outerId}}</span></td>
                                            <td><span>{{record.bill.creationTime| date : "yyyy/MM/dd HH:mm"}}</span></td>

                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="emptymessage" let-records>
                                        <tr *ngIf="primengTableHelper.records">
                                            <td colspan="8" class="text-center">
                                                <img class="emptymessage" src="/assets/common/images/placeholder/productHolder.png" />
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        (onPageChange)="getList($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>